<template>
  <el-dialog
    :before-close="close_Change"
    :title="props.props_title_name"
    v-model="dialogVisible"
    width="60%"
  >
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="220px" style="margin-top: 5px">
        <el-button-group>
          <el-button
            type="success"
            @click="submit_form('post')"
            icon="add-location"
            size="mini"
            style="margin-left: 5px"
            >提交</el-button
          >
          <el-button
            type="primary"
            @click="submit_form('put')"
            icon="edit"
            size="mini"
          ></el-button>
          <el-button
            type="danger"
            @click="delete_host_conf"
            size="mini"
            icon="delete"
          ></el-button>
        </el-button-group>
        <el-table
          :cell-style="{ padding: 0 }"
          ref="singleTable"
          :data="conf_data"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="font-size: 10px; width: 100%"
        >
          <el-table-column
            property="conf_manage_nick"
            show-overflow-tooltip
            label="名称"
            width="80"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            property="conf_manage_name"
            label="文件名"
            width="80"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            property="conf_manage_comment"
            label="备注"
            width="50"
          >
          </el-table-column>
        </el-table>
      </el-aside>
      <el-main>
        <el-form
          ref="conf_from_ref"
          :model="conf_from"
          label-width="80px"
          size="mini"
          :rules="rules"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="别名" prop="conf_manage_nick">
                <el-input v-model="conf_from.conf_manage_nick"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="配置类型" prop="conf_manage_code">
                <SysCodeInput
                  sys_code_type="conf_manage_type"
                  @childClick="conf_type_CodeClick"
                  :sys_code_value="conf_from.conf_manage_code"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="文件名" prop="conf_manage_name">
                <el-input v-model="conf_from.conf_manage_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="conf_manage_comment">
                <el-input v-model="conf_from.conf_manage_comment"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="配置路径" prop="conf_manage_path">
            <el-input v-model="conf_from.conf_manage_path"></el-input>
          </el-form-item>
          <el-form-item label="配置内容" prop="conf_manage_content">
            <el-input
              type="textarea"
              :rows="15"
              placeholder="请输入内容"
              v-model="conf_from.conf_manage_content"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close_Change" size="mini">取 消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import * as Request from "@/general/request";
import SysCodeInput from "@/components/communal/sys_code_input.vue";
import { ElMessage } from "element-plus";
import { watch, ref } from "vue";

export default {
  name: "conf_dialog",
  emits: ["childClick"],
  props: {
    soft_id: Number,
    in_value: Boolean,
    props_title_name: String,
  },
  setup(props, { emit }) {
    let conf_from_ref = ref(null);
    let conf_from = ref({
      conf_manage_nick: "",
      conf_manage_name: "",
      conf_manage_path: "",
      conf_manage_code: "",
      conf_manage_content: "",
      conf_manage_ids: "",
    });
    let rules = ref({
      conf_manage_nick: [
        { required: true, message: "请输入活动名称", trigger: "blur" },
        { min: 2, max: 10, message: "长度在 2 到 10 个字", trigger: "blur" },
      ],
      conf_manage_name: [
        { required: true, message: "请输入文件名", trigger: "change" },
      ],
      conf_manage_path: [
        { required: true, message: "请输入文件覆盖路径", trigger: "change" },
      ],
      conf_manage_code: [
        { required: true, message: "请选择配置文件类型", trigger: "change" },
      ],
      conf_manage_content: [
        { required: true, message: "请输入配置文件内容", trigger: "change" },
      ],
    });
    let conf_text_swap = ref("");
    let conf_data = ref([]);
    let conf_manage_id = ref("");
    let dialogVisible = ref(props.in_value);
    // let app_id_ = ref("")

    const handleCurrentChange = (e) => {
      if (e) {
        conf_manage_id.value = e.conf_manage_id;
        get_host_conf();
      }
    };

    const close_Change = () => {
      dialogVisible.value = false;
      emit("childClick");
    };

    const conf_type_CodeClick = (e) => {
      conf_from.value.conf_manage_code = e;
    };

    watch(props, (new_val) => {
      dialogVisible.value = new_val.in_value;
      if (new_val.in_value) {
        // get_host_confs
        get_host_confs();
      }
      // if (new_val.app_id !== app_id_.value){
      //   app_id_.value = new_val.app_id
      //   // get_host_confs()
      // }
    });

    const submit_form = (action) => {
      conf_from_ref.value.validate((valid) => {
        if (!valid) {
          return false;
        } else {
          if (action === "post") {
            post_host_conf();
          } else {
            put_host_conf();
          }
        }
      });
    };

    const get_host_confs = async () => {
      const response = await Request.GET(
        "/background/home/resource_management/soft_conf_m",
        { soft_id: props.soft_id }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          if (
            return_data.data.length === 1 &&
            !return_data.data[0].conf_manage_id
          ) {
            conf_from.value.conf_manage_ids =
              return_data.data[0].conf_manage_ids;
          } else {
            conf_data.value = return_data.data;
            conf_from.value.conf_manage_ids =
              return_data.data[0].conf_manage_ids;
          }
          // ElMessage.success(return_data.msg)
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const get_host_conf = async () => {
      const response = await Request.GET(
        "/background/home/resource_management/conf_manage",
        { conf_manage_id: conf_manage_id.value }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          // conf_text_swap.value = return_data.data.conf_text
          conf_from.value = return_data.data;
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const post_host_conf = async () => {
      const response = await Request.POST(
        "/background/home/resource_management/conf_manage",
        conf_from.value
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          // conf_text_swap.value = return_data.data.conf_text
          await get_host_confs();
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const put_host_conf = async () => {
      const response = await Request.PUT(
        "/background/home/resource_management/conf_manage",
        conf_from.value
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          conf_text_swap.value = return_data.data.conf_text;
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const delete_host_conf = async () => {
      const response = await Request.DELETE(
        "/background/home/resource_management/conf_manage",
        { conf_manage_id_list: [conf_manage_id.value] }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          conf_text_swap.value = return_data.data.conf_text;
          ElMessage.success(return_data.msg);
          await get_host_confs();
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    return {
      conf_text_swap,
      conf_data,
      conf_from,
      handleCurrentChange,
      dialogVisible,
      conf_type_CodeClick,
      post_host_conf,
      put_host_conf,
      delete_host_conf,
      close_Change,
      get_host_confs,
      props,
      rules,
      submit_form,
      conf_from_ref,
    };
  },
  components: {
    SysCodeInput,
  },
};
</script>

<style scoped></style>
